<template>
  <big-screen-container>
    <top-tabs page-title="安享智邻家数据分析"></top-tabs>
    <el-row class="content" :gutter="10">
      <el-col :span="6">
        <!--        单位月度加油对比-->
        <area-container style="height: 49%; margin-top: 10px" area-title="订单统计" :show-change-line="changeLine[1]" class="scale_content">
          <dept-month-refuel ref="ref2"></dept-month-refuel>
        </area-container>
        <area-container style="height: 49%; margin-top: 10px" area-title="成交统计" :show-change-line="changeLine[1]" class="scale_content">
          <left-cost-statistics></left-cost-statistics>
        </area-container>
      </el-col>
      <el-col :span="12" >
        <div class="dis_f_sb_c">
          <div class="count_box" v-for="(item,index) in orderList" :key="index">
            <div style="font-size: 30px;font-weight: bold">{{item.configValue}}</div>
            <div>{{item.configName}}</div>
          </div>
        </div>
        <area-container style="height:88.5%; margin-top: 10px" area-title="热卖商品" :show-change-line="changeLine[10]" class="scale_content">
          <dept-cost-comparison ref="ref11" style="margin-top: 10px"></dept-cost-comparison>
        </area-container>
      </el-col>
      <el-col :span="6">
        <area-container style="height: 49%; margin-top: 10px"  area-title="会员概览">
          <alarm-msg-echarts></alarm-msg-echarts>
        </area-container>
        <area-container style="height: 49%; margin-top: 10px"  area-title="会员金额">
          <dept-month-all-cost ref="ref4"></dept-month-all-cost>
        </area-container>
      </el-col>
    </el-row>
  </big-screen-container>
</template>

<script lang="ts">
import BigScreenContainer from "./components/big-screen-container";
import topTabs from './components/top-tabs/index';
import areaContainer from './components/area_container/index';
import deptMonthRefuel from './components/dept-month-refuel';
import deptCostComparison from './components/dept-cost-comparison';
import alarmMsgEcharts from "./components/alarm-msg-echarts";
import deptMonthAllCost from './components/dept-month-all-cost';
import leftCostStatistics from "./components/left-cost-statistics";
import { getByKeyApi } from "@/api/largeScreen";
export default {
  components: {
    BigScreenContainer,
    topTabs,
    areaContainer,
    deptMonthRefuel,
    deptCostComparison,
    alarmMsgEcharts,
    deptMonthAllCost,
    leftCostStatistics,
  },
  data () {
    return {
      orderList:[],
      changeLine: [false, false, false, false, false, false, false, false, false, false, false]
    }
  },
  mounted() {
    this.getOrderVip()
  },
  watch: {
  },
  methods: {
    getOrderVip(){
      getByKeyApi("order_vip").then((res) => {
        this.orderList = res.data
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  width: 100%;
  height: calc(100% - 100px);
  position: absolute;
  top: 100px;
  left: 0;
  padding: 10px;
  margin-left: 0 !important;
  margin-right: 0 !important;
  .el-col {
    height: 100%;
  }
}
.scale_content {
  transition: 0.5s all ease;
  cursor: pointer;
  &:hover {
    transform: scale(1.03);
  }
}
.count_box{
  width: 220px;
  height: 100px;
  border-radius: 10px;
  background-color: #3566E3;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}
</style>

<style lang="scss">
.hide_picker_year {
  .el-date-picker__header {
    display: none;
  }
}
</style>

